<template>
  <delay :timeout="10/1000">
    <div class="center-swiper" v-if="list.length > 0">
      <cube-slide
        :data="list"
        :speed="800"
        :interval="3000"
        class="swiper"
        :showDots="false"
      >
        <cube-slide-item
          v-for="(item, index) in list"
          :key="index"
          @click.native="clickHandler(item.url)"
          class="swiper-item"
        >
            <img :src="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
        </cube-slide-item>
      </cube-slide>
    </div>
  </delay>
</template>

<script>
import Delay from '@/components/Delay'
export default {
  name: 'CenterSwiper',
  props: ['list'],
  components: {
    Delay
  },
  methods: {
    clickHandler(url) {
      if (url && url.length > 0) {
        this.$router.push(url)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.center-swiper
  .swiper
    height 105px
    margin 10px
    box-sizing border-box
    background white
    border-radius 5px
    overflow hidden
    img
      width 100%
      height 100%
</style>
